<template>
    <div>
        <a-card :bordered="false">

            <!-- 表头 -->
            <div class="page_title">
                <div class="icon_box" style="margin: 0 20px 0 0;">
                    <i class="iconfont icon-31shouyexuanzhong"></i>
                </div>
                <span class="name" style="margin: 10px 0;">数据填报</span>
            </div>


            <!-- 表单搜索 -->
            <a-form class="form_" layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :span="4">
                        <a-form-item>
                            <a-tooltip :trigger="['focus']" placement="bottomLeft" overlay-class-name="numeric-input">
                                <!-- <span v-if="queryParam.username" slot="title" class="numeric-input-title">
                  {{ queryParam.username !== "-" ? formatNumber(queryParam.username) : "-" }}
                </span> -->
                                <template slot="title"> 请输入账号查询 </template>
                                <a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>
                            </a-tooltip>
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item class="ant-form-item">
                            <a-select v-model="queryParam.sex" placeholder="请选择性别">
                                <a-select-option value="">请选择</a-select-option>
                                <a-select-option value="1">男</a-select-option>
                                <a-select-option value="2">女</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <template v-if="toggleSearchStatus">
                        <a-col :span="4">
                            <a-form-item>
                                <a-input placeholder="请输入真实名字" v-model="queryParam.realname"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item>
                                <a-input placeholder="请输入手机号码查询" v-model="queryParam.phone"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item>
                                <a-select v-model="queryParam.status" placeholder="请选择">
                                    <a-select-option value="">请选择</a-select-option>
                                    <a-select-option value="1">正常</a-select-option>
                                    <a-select-option value="2">冻结</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </template>
                    <a-col :span="4">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <!-- <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> -->
                            <a-button class="last" type="primary" @click="searchReset" icon="reload">重置</a-button>
                            <a @click="handleToggleSearch" style="margin-left: 8px">
                                {{ toggleSearchStatus ? "收起" : "展开" }}
                                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                            </a>
                        </span>
                    </a-col>
                </a-row>
            </a-form>


            <!-- 注册动态路由 -->
            <!-- <button v-if="!isShow" @click="btn">按钮跳转</button> -->
            <!-- <div v-if="isShow" :is="currentComponent">
                <DataFillingIndex></DataFillingIndex>
            </div> -->

            <div>
                <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
                    <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
                        selectedRowKeys.length
                    }}</a>项&nbsp;&nbsp;
                    <a style="margin-left: 24px" @click="onClearSelected">清空</a>
                </div>

                <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" :dataSource="dataSource"
                    :pagination="ipagination" :loading="loading" :rowSelection="{
                        selectedRowKeys: selectedRowKeys,
                        onChange: onSelectChange,
                    }" @change="handleTableChange">
                    <!-- index -->
                    <template slot="avatarslot" slot-scope="text, record">
                        <div class="anty-img-wrap">
                            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
                        </div>
                    </template>
                    <span slot="status" slot-scope="text">
                        <span v-if="text.privateStatus == 1"><a-badge color="#a7a8ad" />{{
                            text.privateStatus_dictText
                        }}</span>
                        <span v-if="text.privateStatus == 2"><a-badge color="#ff4d4f" />{{
                            text.privateStatus_dictText
                        }}(<el-tag type="info" size="mini">{{ text.todoUsers.replace('"', "").replace('"', "")
}}</el-tag>)</span>
                        <span v-if="text.privateStatus == 3"><a-badge color="#f5a623" />{{
                            text.privateStatus_dictText
                        }}</span>
                        <span v-if="text.privateStatus == 4"><a-badge color="#4bc076" />{{
                            text.privateStatus_dictText
                        }}</span>
                    </span>

                    <span slot="action" slot-scope="text, record">
                        <a @click="handleInfo(record)">查看</a>
                        <a-divider type="vertical" v-if="record.privateStatus == 1 || record.privateStatus == 3" />
                        <a @click="fillTask(record)" v-if="record.privateStatus == 1 || record.privateStatus == 3">填报</a>
                        <a-divider type="vertical" v-if="record.privateStatus == 1 || record.privateStatus == 3" />
                        <!-- <a>发起审核</a>
                        <a-divider type="vertical" />
                        <a>审批历史</a> -->
                        <span v-if="record.privateStatus == 1 || record.privateStatus == 3">
                            <act-custom-apply-btn @success="loadData" :data-id="record.busiFormId"
                                :serviceName="serviceName" :variables="record"></act-custom-apply-btn>
                        </span>

                        <a-divider type="vertical" v-if="record.privateStatus != 1" />
                        <act-historic-detail-btn v-if="record.privateStatus != 1"
                            :data-id="record.busiFormId"></act-historic-detail-btn>
                    </span>
                </a-table>
                <FillInfo ref="modalForm" @ok="modalFormOk"></FillInfo>
            </div>
        </a-card>


    </div>
</template>

<script>
import axios from "axios";

import FillInfo from "./FillTask/FillInfo.vue";

import { ListMixin } from "@/mixins/ListMixin";

export default {
    name: 'Datafilling',
    mixins: [ListMixin],
    data() {
        return {
            isShow: false,
            currentComponent: null,
            queryParam: {},
            superQueryFieldList: [
                { type: "input", value: "username", text: "用户账号" },
                { type: "input", value: "realname", text: "用户姓名" },
                {
                    type: "select",
                    value: "sex",
                    dbType: "int",
                    text: "性别",
                    dictCode: "sex",
                },
            ],
            url: {
                list: "/accounting/personal-informant/queryListByInformantUserId",
                // list: "/accounting/task/queryTaskListByUserId",
                delete: "/sys/user/delete",
                deleteBatch: "/sys/user/deleteBatch",
                exportXlsUrl: "/sys/user/exportXls",
                importExcelUrl: "sys/user/importExcel",
            },
            columns: [],
            serviceName: "personalInformantService",
        }
    },

    // 注册动态路由
    components: {
        FillInfo,
        DataFillingIndex: () => import('./DataFillingIndex/index.vue'),

    },

    mounted() {
        this.getColumnsList()
    },

    methods: {

        // 获取数据
        async getColumnsList() {
            let result = await axios.get('/mock/datafColumns')
            this.columns = result.data.data
            console.log(result, '获取表格数据')
        },
        // 点击跳转到动态路由
        // btn() {
        //     this.isShow = true
        //     this.currentComponent = 'datafillingindex'
        // }
        fillTask(record) {
            this.$router.push(`/accounting/DataFillingIndex?taskId=${record.id}`);
        },
        modalFormOk() { },
        passwordModalOk() { },
        getAvatarView: function (avatar) {
            return getFileAccessHttpUrl(avatar);
        },
    },



}
</script>

<style lang="scss">
.select_flex {
    display: flex;
}

.statu1 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
    background: #a7a8ad;
}

.statu2 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
    background: #ff4d4f;
}

.statu3 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
    background: #f5a623;
}

@import "@/assets/css/listcommon.scss";
</style>